<template>
  <div class="code">
    <span>请上传收款码</span>
    <div>
      <van-uploader :after-read="afterRead" max-count="1">
        <img width="150" :src="info.form.image" alt="" />
      </van-uploader>
    </div>
  </div>
  <div class="form">
    <van-cell-group>
      <van-field
        v-model="info.form.phone"
        required
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="info.form.account"
        required
        :label="index == 1 ? '微信帐号' : '支付宝账号'"
        :placeholder="index == 1 ? '请输入微信号' : '请输入支付宝账号'"
      />
      <van-field
        v-model="info.form.code"
        required
        label="验证码"
        style="line-height: 38px"
        placeholder="请输入验证码"
      >
        <template #button>
          <van-button
            class="codeFn"
            size="small"
            type="primary"
            @click="setCode"
            >发送验证码</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
  </div>
  <div class="button" @click="submit">提 交</div>
</template>

<script>
import { defineComponent, reactive, getCurrentInstance, onMounted } from "vue";
import { getPayment, setPayment } from "../../../../api/http.js";
import smsSend from "@/views/public/smsSend";
import uploadImg from "@/views/public/compress.js";
import img from "@/assets/image/upimg.png";

export default defineComponent({
  props: {
    index: {
      type: Number,
    },
  },
  setup(props) {
    const { proxy } = getCurrentInstance();
    // 图片上传
    const info = reactive({
      form: {},
    });
    const afterRead = async (file) => {
      console.log(file);
      const data = await uploadImg(file);
      info.form.image = data;
    };

    const getInfo = async () => {
      const data = await getPayment({ type: props.index });
      info.form = {
        ...data.data,
        image: data.data.image ? data.data.image : img,
      };
      console.log("data---", info.form);
    };

    onMounted(() => {
      getInfo();
    });

    // 表单上传
    const submit = async () => {
      if (
        info.form.phone == "" ||
        info.form.code == "" ||
        info.form.account == ""
      )
        return proxy.$toast.fail({
          message: "信息填写错误",
          forbidClick: true,
        });

      const data = await setPayment(info.form);
      data.code === 200
        ? proxy.$toast.success(data.msg)
        : proxy.$toast.fail(data.msg);
    };

    const setCode = async () => {
      if (info.form.phone == "") return proxy.$toast.fail("请填写手机号");
      smsSend(info.form.phone, 3);
    };
    return {
      info,
      afterRead,
      submit,
      setCode,
    };
  },
});
</script>

<style lang="less" scoped>
.code {
  width: 100%;
  padding: 30px 0;
  text-align: center;
  color: var(--textColor);
  font-size: 1.3rem;
  font-family: PingFang SC;
  font-weight: bold;
  letter-spacing: 1px;

  div {
    margin-top: 20px;

    /deep/ .van-uploader__upload {
      width: 180px;
      height: 180px;
      margin: 0;
    }
    /deep/ .van-uploader__upload-icon {
      font-size: 46px;
    }
    /deep/ .van-uploader__preview-image {
      width: 180px;
      height: 180px;
      margin: 0;
    }

    // img {
    //   width: 60%;
    // }
  }
}
.form {
  margin-top: 10px;
  padding: 0 3%;

  /deep/ .van-cell {
    background-color: transparent;
    font-size: 1rem;
    line-height: 32px;
  }
  /deep/ .van-field__label {
    color: var(--textColor);
  }
  /deep/ .van-field__control {
    color: var(--textColor);
  }

  /deep/ .van-field__button {
    margin-top: -8px;
  }

  .codeFn {
    background-color: transparent;
    color: #d8b88c;
    border: 1px solid #d8b88c;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border-radius: 15px;
    padding: 0 15px;
  }
}

& > img {
  margin-top: 20px;
  width: 100%;
}

.button {
  width: 70%;
  height: 45px;
  background: #d8b88c;
  border-radius: 50px;
  font-size: 1.1rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fff;
  text-align: center;
  line-height: 45px;
  margin-left: 15%;
  margin-top: 20px;
}
</style>
